<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <div class="page-main-title">
      通道配置-新增潮汐通道<i
        class="return-icon"
        @click="back"
      ></i>
    </div>
    <div class="main-content">
      <div class="channel-item">
        <div class="title">新增潮汐通道
        </div>
        <div class="channel-item-bd">
          <el-form
            label-width="120px"
            size="small"
            class="zb-form"
            label-position="left"
            :model="initTideChannelData"
            ref="initTideChannelData"
          >

            <el-form-item
              label="潮汐通道名称"
              prop="tideName"
              placeholder="请输入潮汐通道名称"
              class="input-width-control"
              :rules="{
      required: true, message: '潮汐通道名称不能为空', trigger: 'blur'
    }"
            >
              <el-input v-model="initTideChannelData.tideName"></el-input>
            </el-form-item>
            <el-form-item
              label="潮汐通道类型"
              prop="tideType"
              :rules="{
      required: true, message: '潮汐通道类型不能为空', trigger: 'change'
    }"
            >
              <el-select
                placeholder="请选择"
                v-model="initTideChannelData.tideType"
              >
                <el-option value="1" label="同进出通道"></el-option>
                <el-option value="0" label="进出切换通道"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="通道(入口)"
              prop="enterChannelId"
              :rules="{
      required: true, message: '通道(入口)不能为空', trigger: 'change'
    }"
            >
              <el-select
                placeholder="请选择"
                v-model="initTideChannelData.enterChannelId"
                @visible-change="getEnterChannelList"
              >
                <el-option
                  v-for="item in enterChannelList"
                  :key="item.id"
                  :label="item.entranceName"
                  :value="item.id"
                  :disabled="item.hasTideConfig"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="通道(出口)"
              class="input-width-control"
              prop="leaveChannelId"
              :rules="{
      required: true, message: '通道(出口)不能为空', trigger: 'change'
    }"
            >
              <el-select
                v-model="initTideChannelData.leaveChannelId"
                placeholder="请选择"
                @visible-change="getEnterChannelList"
              >
                <el-option
                  v-for="item in leaveChannelList"
                  :key="item.id"
                  :label="item.entranceName"
                  :value="item.id"
                  :disabled="item.hasTideConfig"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="切换方式"
              class="input-width-control"
              v-if="initTideChannelData.tideType==0"
            >

              <el-radio-group
                v-model="curType"
                @change="typeChange"
              >
                <el-radio label="manualChangeEnable">手动切换</el-radio>
                <el-radio label="autoChangeEnable">自动切换</el-radio>
              </el-radio-group>

            </el-form-item>
            <div class="change-mode-box" v-if="initTideChannelData.tideType==0">

              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-if="curType === 'manualChangeEnable'"
              >
                <el-form-item
                  label="通道"
                  class="input-width-control channel-change"
                >

                  <el-radio-group v-model="initTideChannelData.manualChangeType">
                    <el-radio :label="0">入口</el-radio>
                    <el-radio :label="1">出口</el-radio>
                  </el-radio-group>

                </el-form-item>
              </div>

              <div
                class="el-form--inline zb-inline-form rule-inline-form"
                v-if="curType === 'autoChangeEnable'"
              >
                <el-form-item
                  label="通道"
                  class="input-width-control channel-change"
                >

                  <el-radio-group v-model="initTideChannelData.autoChangeType">
                    <el-radio :label="0">入口</el-radio>
                    <el-radio :label="1">出口</el-radio>
                  </el-radio-group>

                </el-form-item>
              </div>
              <div
                class="change-mode-bd"
                v-if="curType === 'autoChangeEnable'"
              >
                <div
                  class="el-form--inline zb-inline-form rule-inline-form date-form-item w350"
                  v-for="(item, index) in initTideChannelData.uiOpt.timeList"
                >
                  <el-form-item
                    :label="`生效时段${index + 1}`"
                    label-width="86px"
                    :prop="'uiOpt.timeList.'+index+'.timeRang.0'"
                    :rules="{required: true, message: '生效时段不能为空', trigger: 'change'}"
                  >

                    <el-time-picker
                      value-format="HH:mm"
                      format="HH:mm"
                      :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
                      }"
                      is-range
                      v-model="item.timeRang"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择时间范围"
                      @change="checkTime($event, item, index, initTideChannelData.uiOpt.timeList, 0)"
                    >
                    </el-time-picker>

                    <!-- <el-time-picker
                      value-format="HH:mm"
                      format="HH:mm"
                      :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                      placeholder="开始时间"
                      v-model="item[0]"
                      @change="checkTime($event, item, index, initTideChannelData.uiOpt.timeList, 0)"
                    >
                    </el-time-picker>
                  </el-form-item>
                  <span
                    class="unit"
                    style="margin-right: 10px"
                  >至</span>
                  <el-form-item
                    label=""
                    label-width="0"
                  >
                    <el-time-picker
                      value-format="HH:mm"
                      format="HH:mm"
                      :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
                      placeholder="结束时间"
                      v-model="item[1]"
                      @change="checkTime($event, item, index, initTideChannelData.uiOpt.timeList, 1)"
                    >
                    </el-time-picker> -->
                  </el-form-item>

                  <div
                    class="add-icon"
                    v-if="index === 0"
                    @click="addTime"
                  >
                    <i class="el-icon-circle-plus"></i>
                  </div>
                  <div
                    class="del-icon"
                    v-if="index > 0"
                    @click="delTime(initTideChannelData.uiOpt.timeList, index)"
                  >
                    <i class="el-icon-close"></i>
                  </div>
                </div>

                <div class="el-form--inline zb-inline-form rule-inline-form">
                  <el-form-item
                    label="生效周期"
                    class="input-width-control"
                    label-width="86px"
                    prop="autoEffectCycleType"
                    :rules="{
      required: true, message: '请选择生效周期', trigger: 'change'
    }"
                  >
                    <el-select
                      v-model="initTideChannelData.autoEffectCycleType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in autoEffectCycleType"
                        :key="item.value"
                        :label="item.type"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>

                </div>

                <div
                  class="el-form--inline zb-inline-form rule-inline-form week-item"
                  v-if="initTideChannelData.autoEffectCycleType === 1"
                >
                  <el-form-item
                    label="按周"
                    class="input-width-control"
                    label-width="86px"
                    prop="uiOpt.weekSelected"
                    :rules="{
      required: true, message: '请至少选择一项', trigger: 'change'
    }"
                  >
                    <el-checkbox-group v-model="initTideChannelData.uiOpt.weekSelected">
                      <el-checkbox
                        v-for="item in weekOpt"
                        :label="item.value"
                        :key="item.value"
                      >{{item.type}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>

                </div>

                <el-form-item
                  label="自定义"
                  prop=""
                  placeholder="请选择"
                  label-width="86px"
                  class="more-dates"
                  v-if="initTideChannelData.autoEffectCycleType === 2"
                  prop="uiOpt.dateSelected"
                  :rules="{
      required: true, message: '请至少选择一个日期', trigger: 'change'
    }"
                >
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    type="dates"
                    v-model="initTideChannelData.uiOpt.dateSelected"
                    placeholder="选择一个或多个日期"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item
                  label="已选择日期"
                  label-width="100px"
                  v-if="initTideChannelData.autoEffectCycleType === 2"
                >
                  <div class="more-dates-box">
                    {{initTideChannelData.uiOpt.dateSelected.join(', ')}}
                  </div>
                </el-form-item>

              </div>
            </div>

            <el-form-item
              size="medium"
              class="action-box"
              label-width="0px"
            >

              <el-button
                plain
                @click="back"
              >取消</el-button>
              <el-button
                type="primary"
                @click="testForm"
              >保存</el-button>
            </el-form-item>

          </el-form>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageScript from "./index.js";
export default pageScript;
</script>


<style lang="less" scoped>
@import "./index.less";
</style>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
</style>

